<template>
    <div>
        <div class="leaveS-contain">
            <div class="left-nav">
                <div class="head"><span class="title">请休假设置</span></div>
                <div class="head">
                    <halo-tree :returnValue.sync="returnValue" :url="url" :type="type" class="lt widthTree"></halo-tree>
                </div>
                
            </div>
            <div class="right-contain">
                <div class="right-cont" v-for='(item,index) in initList'>
                    <div><span >{{index | addTitle}}</span></div>
                    <ul ref='authObj'>
                        <li>
                            <span class="liTitle">节假日规则</span>
                            <div class="liValue">
                                <el-select
                                    v-model="ruleSelectCheck[index]"
                                    clearable
                                    placeholder="请选择节假日规则">
                                    <el-option
                                        v-for='icon in ruleSelectList'
                                        :key='icon.id'
                                        :label="icon.name"
                                        :value="icon.id">
                                        <i :class="icon"></i>
                                        {{icon.name}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">请假流程模版</span>
                            <div class="liValue">
                              
                                <el-select
                                    v-model="leaveSelectCheck[index]"
                                    clearable
                                    placeholder="请选择请假流程模版">
                                    <el-option
                                        v-for='icon in leaveSelectList'
                                        :key='icon.id'
                                        :label="icon.oldProcess"
                                        :value="icon.id">
                                        <i :class="icon"></i>
                                        {{icon.oldProcess}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">销假流程模版</span>
                            <div class="liValue">
                            
                                <el-select
                                    v-model="xiaoSelectCheck[index]"
                                    clearable
                                    placeholder="请选择销假流程模版">
                                    <el-option
                                        v-for='icon in xiaoSelectList'
                                        :key='icon.id'
                                        :label="icon.oldProcess"
                                        :value="icon.id">
                                        <i :class="icon"></i>
                                        {{icon.oldProcess}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>

                        <li>
                            <span class="liTitle">假种方案</span>
                            <div class="liValue">
                           
                                <el-select
                                    v-model="leaveTypeCheck[index]"
                                    clearable
                                    placeholder="请选择假种方案">
                                    <el-option
                                        v-for='icon in leaveTypeList'
                                        :key='icon.id'
                                        :label="icon.name"
                                        :value="icon.id">
                                        <i :class="icon"></i>
                                        {{icon.name}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>


                    </ul>
                    <div class="right-cont-button">
                    

                        <el-button  
          
                            @click.stop='saveNodeClick(index)'
                            type='success'
                            >保存</el-button>
  
                        <el-button  type='danger' v-if="item.isDel" @click.stop='deleteNodeClick(item)'>删除</el-button>
                    </div>      
                </div>


                <!-- <div class="right-cont">
                    <div><span >内派员工</span></div>
                    <ul ref='authObj'>
                        <li>
                            <span class="liTitle">节假日规则</span>
                            <div class="liValue">
                             
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">请假流程模版</span>
                            <div class="liValue">
                          
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">销假流程模版</span>
                            <div class="liValue">
                          
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>

                        <li>
                            <span class="liTitle">假种方案</span>
                            <div class="liValue">
                           
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>


                    </ul>
                    <div class="right-cont-button">
                    

                        <el-button  
          
                            @click.stop='saveNodeClick'
                            type='success'
                            >保存</el-button>
  
                        <el-button  type='danger' @click.stop='deleteNodeClick'>删除</el-button>
                    </div>       
                </div>

                <div class="right-cont">
                    <div><span >香港员工</span></div>
                    <ul ref='authObj'>
                        <li>
                            <span class="liTitle">节假日规则</span>
                            <div class="liValue">
                           
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">请假流程模版</span>
                            <div class="liValue">
                               
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li>
                            <span class="liTitle">销假流程模版</span>
                            <div class="liValue">

                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>

                        <li>
                            <span class="liTitle">假种方案</span>
                            <div class="liValue">
                               
                                <el-select
                                    v-model="checkedItem"
                                    clearable
                                    placeholder="请选择图标">
                                    <el-option
                                        v-for='icon in iconArr'
                                        :key='icon'
                                        :label="icon"
                                        :value="icon">
                                        <i :class="icon"></i>
                                        {{icon}}
                                    </el-option>
                                </el-select>
                            </div>
                        </li>


                    </ul>
                    <div class="right-cont-button">
                    

                        <el-button  
          
                            @click.stop='saveNodeClick'
                            type='success'
                            >保存</el-button>
  
                        <el-button  type='danger' @click.stop='deleteNodeClick'>删除</el-button>
                    </div>       
                </div> -->
            </div>

        </div>

    </div>
</template>

<script>
    // import NavLi from '@/components/public/circleNav'
    import Vue from 'vue'
    import {  Button, MessageBox, Message, Select, Option,Input} from 'element-ui'

    Vue.use(Button)
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(Input)

    
    import haloTree from '@/components/router-component/tree'
    export default {
    	data () {

    		return {
    			authObj: {},
                authObjCopy:{},
                checkedItem:'',


    			nodeId: null,

    			formData: '',
    			formSelect: '',


    			iconArr:['fa fa-desktop','fa fa-address-book','fa fa-area-chart','fa fa-balance-scale',
    				'fa fa-bar-chart','fa fa-calendar','fa fa-tachometer','fa fa-graduation-cap'
    				,'fa fa-users','fa fa-language','fa fa-paper-plane','fa fa-shopping-bag'
    				,'fa fa-home','fa fa-user','fa fa-book','fa fa-circle-o','fa fa-gear','fa fa-info','fa fa-diamond'
    				,'fa fa-th-large'
    			],
                
                leaveSelectList:[],
                xiaoSelectList:[],
                ruleSelectList:[],
                leaveTypeList:[],

                leaveSelectCheck:[],
                xiaoSelectCheck:[],
                ruleSelectCheck:[],
                leaveTypeCheck:[],

                initList:[],

                returnValue:{},
				url:this.URL.getAllDeptList.url,
				type:'employee',
    		}
    	},
	    components:{
            haloTree
        },
        watch:{
        	returnValue:function(newVal,oldVal){
        		if (newVal) {
                    console.log('watchReturnVal',newVal)
                    this.initLeaveSetData();
        		}
        	}
        },
        filters:{
            addTitle:function(index){
                switch(index){
                    case 0 :
                        return '内地员工';
                        break;
                    case 1 :
                        return '内派员工';
                        break;
                    case 2 :
                        return '香港员工';
                        break;                                                
                }

            }

        },
    	computed: {
    		checked: function () {
    			return this.authObj.id
    		}
    	},
    	created () {
    		// this.refresh(true);
    		this.initAllSelectData();
    	},
    	methods: {

            initLeaveSetData(){
                var params = {
                    setId:this.returnValue.setid,
                    deptId:this.returnValue.deptid
                }
    			this.Axios.Post(this.URL.getWfConfLeaveConfigByDeptId.url,params)
    				.then(res => {
                        if (res.data.status == 1) {
                            this.handleInitLeaveData(res.data.datas);
                        }                         
    				})
            },
            handleInitLeaveData(data){
               var delStrArr=[];
               data.del && (delStrArr = data.del.split(',')) 
               
               var result = [];
               for (var a=1;a<4;a++) {
                   if (data[a]) {
                       result[a-1] = data[a];
                   } else {
                       result[a-1] = {};
                   }
               }
               
               delStrArr.forEach((val)=>{
                   val && (result[val-1].isDel = true)
               })

               for (let b=0;b<3;b++) {
                    if (Object.keys(result[b]).length) {
                        this.leaveSelectCheck[b] = result[b].askLeaveProcessMouldId;
                        this.xiaoSelectCheck[b] = result[b].salesLeaveProcessMouldId;
                        this.ruleSelectCheck[b] = result[b].leaveRuleId;
                        this.leaveTypeCheck[b] = result[b].leaveTypeProgrammeId;
                    } else {
                        this.leaveSelectCheck[b] = '';
                        this.xiaoSelectCheck[b] = '';
                        this.ruleSelectCheck[b] = '';
                        this.leaveTypeCheck[b] = '';                        
                    }
                   
               }
               
               this.initList = result;
               console.log(result,'result');
                
            },

            initAllSelectData(){
                //初始化请假模版
                this.Axios.Post(this.URL.getAskProcessMouldList.url,{})
    				.then(res => {
                        if (res.data.status == 1) {
                            this.leaveSelectList = res.data.datas;
                        }   
                    })
                //初始化销假模版    
    			this.Axios.Post(this.URL.getSalesProcessMouldList.url,{})
    				.then(res => {
                        if (res.data.status == 1) {
                            this.xiaoSelectList = res.data.datas;
                        }   
                    })
                //初始化假种规则
    			this.Axios.Post(this.URL.getAllVacationRule.url,{})
    				.then(res => {
                        if (res.data.status == 1) {
                            this.ruleSelectList = res.data.datas;
                        }   
                    })
                //初始化假种方案    
    			this.Axios.Post(this.URL.getAllLeaveType.url,{})
    				.then(res => {
                        if (res.data.status == 1) {
                            this.leaveTypeList = res.data.datas;
                        }   
                    })                    
            },



    		saveNodeClick:function(index){
    			MessageBox.alert('确定要保存吗?', '提示', {
    				confirmButtonText: '确定',
    				cancelButtonText: '取消',
    				callback: action => {
    					if (action === 'cancel') {
    						return
    					}
                        this.saveNodeSure(index);
    				}
    			})
            },

    		saveNodeSure (index) {
                if (!this.ruleSelectCheck[index] || !this.leaveSelectCheck[index] || !this.leaveTypeCheck[index] || !this.xiaoSelectCheck[index]) {
                    Message({
                        message: '所有选择项不能为空',
                        type: 'warning'
                    })
                    return;
                }
                let params = {
                    deptId:this.returnValue.deptid,
                    setid:this.returnValue.setid,
                    personType:index+1,
                    leaveRuleId:this.ruleSelectCheck[index],
                    askLeaveProcessMouldId:this.leaveSelectCheck[index],
                    leaveTypeProgrammeId:this.leaveTypeCheck[index],
                    salesLeaveProcessMouldId:this.xiaoSelectCheck[index]
                }

                this.Axios.Post(this.URL.insertOrUpdateWfConfLeaveConfig.url,params)
    				.then(res=>{
                        if (res.data.status == 1) {
                            Message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.initLeaveSetData();
                        }
    				})
    			
    		},
    		saveNodeSureCB:function(res){
    			if(res.data.status === 1){
    				this.dialogVisible = false
    				this.disabled = true
    				this.getNodeData(this.nodeId)
    				Message({
    					message: '保存成功',
    					type: 'success'
    				})
    			}
    		},

    		deleteNodeClick (item) {
                
    			MessageBox.alert('确定要删除'+ this.handleTitle(item.personType) + '设置'+'吗?', '是否删除' , {
    				confirmButtonText: '确定',
    				cancelButtonText: '取消',
    				callback: action => {
    					if (action === 'cancel') {
    						return
    					}
                        this.deleteNodeSureCB(item);
    				}
    			})
            },
            
            handleTitle(type){
                switch(type){
                    case 1 :
                        return '内地员工';
                        break;
                    case 2 :
                        return '内派员工';
                        break;
                    case 3 :
                        return '香港员工';
                        break;                                                
                }
            },

    		deleteNodeSureCB:function(item){
                let params = {
                    id:item.id
                }

                this.Axios.Post(this.URL.delWfConfLeaveConfig.url,params)
    				.then(res=>{
                        if (res.data.status == 1) {
                            Message({
                                message: '删除部门请休假设置成功',
                                type: 'success'
                            });
                            this.initLeaveSetData();
                        }
    				})
    		},
    		ajaxPost:function(url,params,callback){
    			var self = this
    			this.Axios.Post(url,params)
    				.then(function(res){
    					if(callback){
    						callback(res,self)
    					}
    				})
    		}
    	}
    }
</script>
<style scoped='scoped'>
    input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        color: #1f2d3d;
        font-size: inherit;
        height: 36px;        
        line-height: 1;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    input.small{
        height: 30px;
    }
    input.mini{
        height: 24px;
    }


    .leaveS-contain .el-input.is-disabled .el-input__inner {
    background: #fff;
    cursor: auto;
    border: 0;
    color: #1f2d3d;
    }

    .leaveS-contain .el-input.is-disabled.el-input__inner {
    border: 0;
    background-color: #fff;
    }
    .right-cont-button {
        margin: 0 auto;
        text-align: center;
    }
    .right-cont-button>button{
        width:80px;
    }
    .leaveS-contain {
    clear: both;
    }
    .leaveS-contain > div {
    float: left;
    background-color: #fff;
    margin: 1% 1%;
    min-height: 800px;
    }
    .leaveS-contain .title {
    font-weight: 600;
    }
    .leaveS-contain .left-nav {
    width: 36%;
    }
    .leaveS-contain .right-contain {
    width: 60%;
    }
   .leaveS-contain .left-nav > div.head,
    .leaveS-contain .right-cont > div.head {
        padding-left: 20px;
    } 
    .leaveS-contain .left-nav > div.head:first-child{
        margin-top:10px;
        font-size:16px;
    }
    .leaveS-contain .left-nav > ul,
    .leaveS-contain .right-cont > ul {
    padding: 10px 35px 10px 35px;
    }
    .leaveS-contain .right-cont > ul > li {
        line-height: 3;
        display: flex;
    }
    .leaveS-contain .right-cont>div:first-child{
        font-size:14px;
        font-weight: 600;
        margin-left:18px;
        margin-top:10px;
    }
    .leaveS-contain .right-cont .liTitle {
        display: inline-block;
        width: 100px;
        text-align: right;
    }
    .leaveS-contain .right-cont .liValue {
        display: inline-block;
        margin-left: 50px;
    }
    .leaveS-contain .right-cont > i {
        display: inline-block;
        font-size: 24px;
        color: #fff;
        margin-left: 35px;
    }
    .leaveS-contain .right-cont > i:hover {
        color: #444;
    }
    .leaveS-contain .right-cont .refresh,
    .leaveS-contain .right-cont .delete {
    background-color: #18a689;
    display: inline-block;
    width: 50px;
    line-height: 30px;
    text-align: center;
    height: 30px;
    border-radius: 6px;
    }
</style>
